<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="NewExpenditureId" label="新增支出Id" />
    <el-table-column property="TheInvoiceNumber" label="支出单号">
    </el-table-column>
    <el-table-column property="ExpenditureTypeName" label="支出类型" />
    <el-table-column property="Remark" label="备注" />
    <el-table-column property="SupportingTopic" label="支出主题" />
    <el-table-column property="SupportDate" label="支出日期">
      <template #default="{ row }">
        <span> {{ row.SupportDate.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column property="PaymentAmount" label="付款金额" />
    <el-table-column property="Payee" label="收款方" />
    <el-table-column property="AccountName" label="账号名称" />
    <el-table-column property="NetworkName" label="网点名称" />
    <el-table-column property="DepositBank" label="开户银行" />
    <el-table-column property="BankAccount" label="银行账号" />
    <el-table-column property="Attachment" label="附件" style="width: 100px">
      <template #default="{ row }">
        <img :src="row.Attachment" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
    <el-table-column label="操作" style="width: 100px">
      <template v-slot="scope">
        <el-link type="warning" @click="EditInfo(scope.row.NewExpenditureId)"
          >详情</el-link
        >
        &nbsp; &nbsp; &nbsp;
        <el-link type="danger" @click="DeleteInfo(scope.row.NewExpenditureId)"
          >删除</el-link
        >
      </template>
    </el-table-column>
  </el-table>
  <br />
  <br />
  <el-pagination
    v-model:current-page="PageIndex"
    v-model:page-size="PageSize"
    :page-sizes="[5, 20, 50, 100]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage, ElTable } from "element-plus";
import axios from "axios";
import router from "@/router";
import { reactive } from "vue";
const PageSize = ref(5);
const PageIndex = ref(1);
const totalCount = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
interface User {
  NewExpenditureId: string;
  TheInvoiceNumber: string;
  ExpenditureTypeName: string;
  Remark: string;
  SupportingTopic: string;
  SupportDate: string;
  PaymentAmount: string;
  Payee: string;
  AccountName: string;
  NetworkName: string;
  DepositBank: string;
  BankAccount: string;
  Attachment: string;
}
// const EditSale = (SaleId: string) => {
//   router.push(`/UserList/saledetails?SaleId=${SaleId}`);
// };

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData = ref([]);
const GetAddExpenditure = () => {
  axios
    .get("AdditionalExpenditure/GetAdditionalExpenditure", {
      params: {
        PageSize: PageSize.value,
        PageIndex: PageIndex.value,
      },
    })
    .then((res) => {
      tableData.value = res.data.Data;
      totalCount.value = res.data.TotalCount;
    });
};
const handleSizeChange = (val: number) => {
  PageSize.value = val;
  GetAddExpenditure();
};
const handleCurrentChange = (val: number) => {
  PageIndex.value = val;
  GetAddExpenditure();
};
const DeleteInfo = (NewExpenditureId: string) => {
  axios
    .delete(
      `AdditionalExpenditure/DeleteAdditionalExpenditure?NewExpenditureId=${NewExpenditureId}`
    )
    .then((res) => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message);
        GetAddExpenditure();
      }
    });
};
const EditInfo = (NewExpenditureId: string) => {
  router.push(
    `/UserList/edititionalExpenditure?NewExpenditureId=${NewExpenditureId}`
  );
};
GetAddExpenditure();
</script>
<style lang="scss">
.table-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-pagination__sizes {
  margin-right: 20px;
}

.el-pagination__total {
  margin-right: auto;
}
</style>

